<template>
  <div class="login">
    <h3>面经登录</h3>
    <input type="text" placeholder="请输入用户名" v-model="username">
    <input type="text" placeholder="请输入密码" v-model="password">
    <button @click="handleLogin">登录</button>
    <router-link to="/register" class="aa">注册账号</router-link>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'HmLogin',
    data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async handleLogin() {
      try {
        // 发送登录请求
        const response = await axios.post('http://interview-api-t.itheima.net/h5/user/login', {
          username: this.username,
          password: this.password
        });
      
        localStorage.setItem('token', response.data.data.token);
        if (response.data.message==='请求成功') {
          // 登录成功，显示提示
          alert('登录成功');
          // 跳转到 layout 页面
          this.$router.push('/layout');
        } else {
          // 登录失败，显示错误信息
          alert('登录失败，请检查输入');
        }
      } catch (error) {
        // 处理请求错误
        console.error(error);
        alert('登录失败，请稍后再试');
      }
    }
  }

}

</script>

<style lang="less" scoped>
//写一个面经登录样式
h3{
    text-align: center;
    margin-bottom: 20px;
  }
/* 输入框样式 */
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 按钮样式 */
button {
  width: 100%;
  padding: 10px;
  background-color: #ff6600; /* 橙色背景 */
  color: white; /* 白色文字 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #ff8c00; /* 鼠标悬停时的橙色背景 */
}

/* 注册链接样式 */
.router-link-exact-active {
  color: #ff6600; /* 活动状态下的橙色文字 */
}

.router-link-exact-active:hover {
  text-decoration: underline; /* 鼠标悬停时的下划线 */
}
// 注册链接样式
.aa{
  //注册链接靠在最左边怎么写
  display: block;
  text-align: end;
  margin-top: 20px;
}

</style>